<template>
  <view class="my-car-page">
    <!-- 车辆列表 -->
    <view class="car-list">
      <view v-for="(car, index) in carList" :key="index" class="car-item">
        <!-- 车辆图片 -->
        <image src="/pages/my/image/我的车辆.png" class="car-image" mode="aspectFill"></image>

        <!-- 车辆信息 -->
        <view class="car-info">
          <text class="car-model">车型：{{ car.model }}</text>
          <text class="car-license">车牌：{{ car.license }}</text>
          <!-- 默认车辆单选按钮 -->
          <view class="default-car">
            <radio :checked="car.isDefault" @click="setDefaultCar(index)" />
            <text>设置默认</text>
          </view>
        </view>

        <!-- 删除按钮 -->
        <view class="delete-button" @click="deleteCar(index)">
          <text>删除</text>
        </view>
      </view>
    </view>

    <!-- 添加爱车按钮 -->
    <view class="add-car-button" @click="goToAddCarPage">
      <text>添加爱车</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 模拟车辆数据
const carList = ref([
  {
    image: '/static/car1.jpg',
    model: '特斯拉 Model 3',
    license: '粤A12345',
    isDefault: true,
  },
  {
    image: '/static/car2.jpg',
    model: '宝马 X5',
    license: '粤B67890',
    isDefault: false,
  },
]);

// 设置默认车辆
const setDefaultCar = (index) => {
  carList.value.forEach((car, i) => {
    car.isDefault = i === index;
  });
};

// 删除车辆
const deleteCar = (index) => {
  carList.value.splice(index, 1);
};

// 跳转到添加车辆页面
const goToAddCarPage = () => {
  uni.navigateTo({
    url: '/pages/my/mycar/addCar/addCar', // 替换为你的添加车辆页面路径
  });
};
</script>

<style scoped>
.my-car-page {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.car-list {
  margin-bottom: 80px; /* 为添加按钮留出空间 */
}

.car-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd; /* 下边框 */
}

.car-image {
  width: 80px;
  height: 80px;
  border-radius: 50%; /* 圆形图片 */
  margin-right: 15px;
}

.car-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.car-model {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.car-license {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.default-car {
  display: flex;
  align-items: center;
}

.default-car text {
  font-size: 14px;
  color: #666;
  margin-left: 5px;
}

.delete-button {
  background-color: #ff4d4d;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}

.add-car-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #409eff;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.add-car-button:active {
  background-color: #66b1ff;
}
</style>